<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view :class="['wrap',{'dark':theme=='dark'}]">
			
			
			
			<view class="mplrto">
				<view class="mplrto">
					<view class="bgtxt">矿机钱包</view>
					<view class="bgtxttt">3000.000000 USDT</view>
					
				</view>
				<view class="mplrto">
					<view class="bgtxt22">燃烧能源 ≈ 500.000000 TSL</view>
					
				</view>
			</view>
			
			
			<view>
				<!-- TABS 导航切换 -->
				<view class="bmret">
					<u-tabs :list="list" bg-color="" bar-height="4" bar-width="120" active-color="#1e61ff"
					 inactive-color="#b1b7bd" :is-scroll="false" :current="current" @change="change">
					</u-tabs>
				</view>
			</view>
			
			<!-- 矿机商城 -->
			<view v-show="current==0">
				<view class="kjsc">
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								<image class="image3" src="../../static/BTC.png" mode=""></image>
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								BTC 220411-01
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								金星矿机：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								BTC / 179 Days / 100T
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								预计产能：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								150%
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								服务周期：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								179 天
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								燃料能源：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								90 Ts/l
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								矿机算力：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								86 TH/s
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<u-row gutter="16">
						<u-col span="3">
							<view class="kjsc1 demo-layout">
								合约价格：
							</view>
						</u-col>
						<u-col span="3">
							<view class="kjsc2 demo-layout">
								
							</view>
						</u-col>
						<u-col span="6">
							<view class="kjsc3 demo-layout">
								380.20 USDT
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					
					<!-- 购买按钮开始 -->
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout2"><!-- 缕空 -->
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout">
								<view class="anniu">
									<u-button type="primary">购 买</u-button>
								</view>
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout2"><!-- 缕空 -->
							</view>
						</u-col>
					</u-row>
					<!-- 购买按钮开始 -->
					
				</view>
			</view>
			
			<!-- 我的矿机 -->
			<view v-show="current==1">
			2222
			</view>
			
			<!-- 我的收益 -->
			<view v-show="current==2">
			3333
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		teManagementList,
		teManagementOrderList0,
		teManagementOrderList1,
		knowTeManagementList,wallet,teManagementOrderAdd
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				list: [{
					name: '矿机商城',
					
				},
				{
					name: '我的矿机',
					
				},
				{
					name: '我的收益',
					
				}],
				current: 0
				
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W713'),
			})
			this.$utils.setTheme(this.theme);
			this.getListData()
			
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}


	.container {
		
		width: 100%;
		height: 100%;
		
		.wrap {
			padding: 0px;
			padding-top: 0vw;
			width: 100%;
			height: 60vw;
			background-color: #24254c;
			background-size: 100%;
			background-position: center center;
			border-radius: 0vw 0vw 0vw 0vw;
		}
		
		.bmret{
			    padding: 0vw 0;
			    text-align: center;
			    justify-content: space-around;
			    border-radius: 4vw 4vw 0vw 0vw;
			    background-color: #2e2f5a;
				background-color: #FFF;
				    position: relative;
				    top: -10vw;
			
		}
		.bgtxt{
			font-size: 16px;
			/*font-weight: bold;*/
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 10vw;
			left: 2vw;
		}
		.bgtxt2{
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 20vw;
			left: 2vw;
		}
		.mplrto{
			/*width: 100%;*/
			height: 100%;
			
			background: #3e38ec;
			background: url(../../static/mstarch/ssg.gif) #2354e6 no-repeat center center;
			padding: 0;
			background-size: cover;
			background-position: center;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
		}
		.bgtxttt{
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 20vw;
			left: 2vw;
		}
		.bgtxt22{
			font-size: 16px;
			/*font-weight: bold;*/
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 30vw;
			left: 2vw;
		}
		
		
		
		
	}

</style>
<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 0px 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}
	
	.demo-layout2 {
		height: 20px;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

<style scoped lang="scss">
	.kjsc {
		background-color: #ffffff;
		padding: 0px 0px;
		margin-top: 30px;
		border-radius: 4vw;
		width: 96%;
		margin: 0vw 2vw;
		border: 0.5px solid #7079ab24;
	}
	.kjsc1 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
	}
	.kjsc2 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
	}
	.kjsc3 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: center; */
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
	}
	.image3 {
		margin-right: 6vw;
		width: 10vw;
		height: 10vw;
		border-radius: 0%;
	}
	
	.anniu{
		width: 92%;
		margin: -2vw 4vw;
		margin-top: 0vw;
	}

	
</style>